<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>业务概览 - BI面板</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#165DFF',
              secondary: '#36CFC9',
              success: '#52C41A',
              warning: '#FAAD14',
              danger: '#FF4D4F',
              info: '#8C8C8C',
              light: '#F5F7FA',
              dark: '#1D2129',
              'card-bg': '#FFFFFF',
              'chart-bg': '#F9FAFB'
            },
            fontFamily: {
              sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
            },
            spacing: {
              '18': '4.5rem',
              '22': '5.5rem'
            }
          }
        }
      };
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
          .content-auto {
              content-visibility: auto;
          }
          .card-shadow {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          }
          .text-balance {
              text-wrap: balance;
          }
          .scrollbar-hide::-webkit-scrollbar {
              display: none;
          }
          .scrollbar-hide {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .progress-bar {
              height: 6px;
              border-radius: 3px;
              overflow: hidden;
          }
          .progress-value {
              height: 100%;
              border-radius: 3px;
              transition: width 0.5s ease;
          }
          /* 手机外框样式 */
          .phone-frame {
              width: 414px;
              height: 896px;
              background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
              border-radius: 45px;
              padding: 14px;
              box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 
                          0 0 0 2px rgba(255, 255, 255, 0.05) inset,
                          0 0 20px rgba(0, 0, 0, 0.2);
              position: relative;
              margin: 40px auto;
          }
          .phone-screen {
              width: 100%;
              height: 100%;
              background: white;
              border-radius: 35px;
              overflow-y: auto;
              overflow-x: hidden;
              position: relative;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
          }
          /* 隐藏手机屏幕的滚动条，保持美观 */
          .phone-screen::-webkit-scrollbar {
              display: none;
          }
          .phone-screen {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .phone-notch {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 200px;
              height: 32px;
              background: #1a1a1a;
              border-radius: 0 0 20px 20px;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          }
          .phone-notch::before {
              content: '';
              position: absolute;
              top: 10px;
              left: 50%;
              transform: translateX(-50%);
              width: 70px;
              height: 6px;
              background: #333;
              border-radius: 3px;
          }
          .phone-notch::after {
              content: '';
              position: absolute;
              top: 10px;
              right: 25px;
              width: 8px;
              height: 8px;
              background: #1a5d2e;
              border-radius: 50%;
              box-shadow: 0 0 6px rgba(26, 255, 46, 0.8);
          }
          .phone-button {
              position: absolute;
              background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
              border-radius: 3px;
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
          }
          .phone-button.power {
              right: -5px;
              top: 160px;
              width: 5px;
              height: 90px;
              border-radius: 0 3px 3px 0;
          }
          .phone-button.volume-up {
              left: -5px;
              top: 140px;
              width: 5px;
              height: 60px;
              border-radius: 3px 0 0 3px;
          }
          .phone-button.volume-down {
              left: -5px;
              top: 210px;
              width: 5px;
              height: 60px;
              border-radius: 3px 0 0 3px;
          }
          /* ActionSheet 样式 */
          .action-sheet-overlay {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              z-index: 1000;
              opacity: 0;
              visibility: hidden;
              transition: opacity 0.3s ease, visibility 0.3s ease;
              border-radius: 35px;
          }
          .action-sheet-overlay.show {
              opacity: 1;
              visibility: visible;
          }
          .action-sheet {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: #FFFFFF;
              border-radius: 16px 16px 0 0;
              z-index: 1001;
              transform: translateY(100%);
              transition: transform 0.3s ease;
              max-height: 60vh;
              overflow-y: auto;
          }
          .action-sheet.show {
              transform: translateY(0);
          }
          .action-sheet-header {
              padding: 16px;
              border-bottom: 1px solid #F2F3F5;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
          .action-sheet-title {
              font-size: 16px;
              font-weight: 600;
              color: #1D2129;
          }
          .action-sheet-close {
              background: none;
              border: none;
              font-size: 20px;
              color: #8C8C8C;
              cursor: pointer;
              padding: 0;
              width: 24px;
              height: 24px;
              display: flex;
              align-items: center;
              justify-content: center;
          }
          .action-sheet-body {
              padding: 8px 0;
          }
          .action-sheet-item {
              padding: 16px;
              font-size: 16px;
              color: #1D2129;
              cursor: pointer;
              transition: background-color 0.2s ease;
              display: flex;
              align-items: center;
              justify-content: space-between;
          }
          .action-sheet-item:hover {
              background-color: #F5F7FA;
          }
          .action-sheet-item.active {
              color: #165DFF;
          }
          .action-sheet-item.active::after {
              content: '✓';
              color: #165DFF;
              font-weight: bold;
          }
          /* 表格滚动容器 */
          .table-scroll {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
          }
          .table-scroll::-webkit-scrollbar {
              height: 4px;
          }
          .table-scroll::-webkit-scrollbar-thumb {
              background: #D9D9D9;
              border-radius: 2px;
          }
          /* 团队筛选按钮样式 */
          .finance-team-btn,
          .activity-chart-team-btn,
          .member-team-btn,
          .channel-team-btn {
              background-color: #F5F7FA;
              color: #8C8C8C;
          }
          .finance-team-btn.active,
          .activity-chart-team-btn.active,
          .member-team-btn.active,
          .channel-team-btn.active {
              background-color: #165DFF;
              color: #FFFFFF;
          }
          .finance-team-btn:hover,
          .activity-chart-team-btn:hover,
          .member-team-btn:hover,
          .channel-team-btn:hover {
              opacity: 0.8;
          }
      }
    </style>
  </head>
  <body class="font-sans text-dark" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center;">
    <!-- 手机外框 -->
    <div class="phone-frame">
      <!-- 刘海屏 -->
      <div class="phone-notch"></div>
      
      <!-- 音量按钮 -->
      <div class="phone-button volume-up"></div>
      <div class="phone-button volume-down"></div>
      
      <!-- 电源按钮 -->
      <div class="phone-button power"></div>
      
      <!-- 手机屏幕 -->
      <div class="phone-screen">
        <!-- 页面内容 -->
        <div class="p-4 pt-10">
          
          <!-- 顶部导航栏 -->
          <div class="mb-6 flex items-center justify-between">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-chart-line text-white text-lg"></i>
              </div>
              <h1 class="text-xl font-bold">业务概览</h1>
            </div>
            <div class="w-10 h-10 bg-light rounded-full flex items-center justify-center">
              <i class="fas fa-user text-info"></i>
            </div>
          </div>

          <!-- 财务指标模块 -->
          <section class="mb-6">
            <h2 class="text-lg font-semibold mb-4">财务指标</h2>
            
            <!-- 历史总业绩卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">历史总业绩</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">累计数据</span>
              </div>
              <div class="mb-4">
                <p class="text-3xl font-bold mb-1">¥32,580,450</p>
                <div class="flex items-center text-success text-sm">
                  <i class="fas fa-arrow-up mr-1"></i>
                  <span>15.8%</span>
                  <span class="text-info ml-2">较去年同期</span>
                </div>
              </div>
              <div class="space-y-3">
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华南团队业绩</span>
                    <span class="font-medium">¥19,548,270</span>
                  </div>
                  <div class="progress-bar bg-gray-100">
                    <div class="progress-value bg-primary" style="width: 60%"></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华东团队业绩</span>
                    <span class="font-medium">¥13,032,180</span>
                  </div>
                  <div class="progress-bar bg-gray-100">
                    <div class="progress-value bg-secondary" style="width: 40%"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 上月业绩卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">上月业绩</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">2024年10月</span>
              </div>
              <div class="mb-4">
                <p class="text-3xl font-bold mb-1">¥1,285,620</p>
                <div class="flex items-center text-success text-sm">
                  <i class="fas fa-arrow-up mr-1"></i>
                  <span>8.3%</span>
                  <span class="text-info ml-2">较上月</span>
                </div>
              </div>
              <div class="space-y-3">
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华南团队业绩</span>
                    <span class="font-medium">¥771,372</span>
                  </div>
                  <div class="progress-bar bg-gray-100">
                    <div class="progress-value bg-primary" style="width: 60%"></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华东团队业绩</span>
                    <span class="font-medium">¥514,248</span>
                  </div>
                  <div class="progress-bar bg-gray-100">
                    <div class="progress-value bg-secondary" style="width: 40%"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 本月业绩/本月目标卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">本月业绩 / 本月目标</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">2024年11月</span>
              </div>
              <div class="mb-4">
                <div class="flex items-end">
                  <p class="text-3xl font-bold mr-2">¥585,320</p>
                  <p class="text-info mb-1">/ ¥1,500,000</p>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2 mb-1 mt-3">
                  <div class="bg-warning h-2 rounded-full" style="width: 39%"></div>
                </div>
                <div class="flex justify-between text-sm text-info">
                  <span>目标完成率</span>
                  <span>39.0%</span>
                </div>
              </div>
              <div class="space-y-3">
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华南团队业绩 / 目标</span>
                    <span class="font-medium">¥351,192 / ¥900,000</span>
                  </div>
                  <div class="w-full bg-gray-100 rounded-full h-2">
                    <div class="bg-primary h-2 rounded-full" style="width: 39%"></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>华东团队业绩 / 目标</span>
                    <span class="font-medium">¥234,128 / ¥600,000</span>
                  </div>
                  <div class="w-full bg-gray-100 rounded-full h-2">
                    <div class="bg-secondary h-2 rounded-full" style="width: 39%"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 总营收趋势图 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="mb-4">
                <h3 class="text-base font-medium mb-3">总营收趋势</h3>
                <div class="flex gap-2">
                  <button class="finance-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors active" data-team="all">全部团队</button>
                  <button class="finance-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="south">华南团队</button>
                  <button class="finance-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="east">华东团队</button>
                </div>
              </div>
              <div id="finance-chart" style="width: 100%; height: 300px;"></div>
            </div>
          </section>

          <!-- 运营指标模块 -->
          <section class="mb-6">
            <h2 class="text-lg font-semibold mb-4">运营指标</h2>
            
            <!-- 活动进展筛选器 -->
            <div class="bg-card-bg rounded-xl p-4 card-shadow mb-4">
              <div class="grid grid-cols-3 gap-2">
                <button id="activity-team-filter-btn" class="px-3 py-2 bg-light rounded-lg text-sm flex items-center justify-between">
                  <span class="text-xs" id="activity-team-text">全部团队</span>
                  <i class="fas fa-chevron-down text-xs text-info"></i>
                </button>
                <button id="activity-course-filter-btn" class="px-3 py-2 bg-light rounded-lg text-sm flex items-center justify-between">
                  <span class="text-xs" id="activity-course-text">全部课程</span>
                  <i class="fas fa-chevron-down text-xs text-info"></i>
                </button>
                <button id="activity-time-filter-btn" class="px-3 py-2 bg-light rounded-lg text-sm flex items-center justify-between">
                  <span class="text-xs" id="activity-time-text">本月</span>
                  <i class="fas fa-chevron-down text-xs text-info"></i>
                </button>
              </div>
            </div>

            <!-- 活动进展列表 -->
            <div class="bg-card-bg rounded-xl p-4 card-shadow mb-4">
              <h3 class="text-base font-medium mb-3">活动进展</h3>
              <div class="table-scroll">
                <div id="activity-list" class="space-y-3">
                  <!-- 动态生成活动卡片 -->
                </div>
              </div>
            </div>

            <!-- 举办活动趋势图 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="mb-4">
                <h3 class="text-base font-medium mb-3">举办活动趋势</h3>
                <div class="flex gap-2">
                  <button class="activity-chart-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors active" data-team="all">全部团队</button>
                  <button class="activity-chart-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="south">华南团队</button>
                  <button class="activity-chart-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="east">华东团队</button>
                </div>
              </div>
              <div id="activity-chart" style="width: 100%; height: 300px;"></div>
            </div>
          </section>

          <!-- 会员指标模块 -->
          <section class="mb-6">
            <h2 class="text-lg font-semibold mb-4">会员指标</h2>
            
            <!-- 当前会员总数卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">当前会员总数</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">截至今日</span>
              </div>
              <div class="mb-4">
                <p class="text-3xl font-bold mb-3">118人</p>
              </div>
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-blue-50 rounded-lg p-3">
                  <div class="text-xs text-info mb-1">华南团队</div>
                  <div class="text-2xl font-bold text-primary">92人</div>
                </div>
                <div class="bg-green-50 rounded-lg p-3">
                  <div class="text-xs text-info mb-1">华东团队</div>
                  <div class="text-2xl font-bold text-secondary">26人</div>
                </div>
              </div>
            </div>

            <!-- 上月会员数卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">上月会员数</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">2024年10月</span>
              </div>
              <div class="mb-4">
                <p class="text-3xl font-bold mb-1">114人</p>
                <div class="flex items-center text-success text-sm">
                  <i class="fas fa-arrow-up mr-1"></i>
                  <span>12人</span>
                  <span class="text-info ml-2">新增会员</span>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-blue-50 rounded-lg p-3">
                  <div class="text-xs text-info mb-1">华南团队</div>
                  <div class="text-2xl font-bold text-primary">85人</div>
                </div>
                <div class="bg-green-50 rounded-lg p-3">
                  <div class="text-xs text-info mb-1">华东团队</div>
                  <div class="text-2xl font-bold text-secondary">29人</div>
                </div>
              </div>
            </div>

            <!-- 本月会员数/转化率卡片 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="flex justify-between items-start mb-4">
                <h3 class="text-base font-medium text-info">本月会员数 / 转化率</h3>
                <span class="text-xs text-info bg-light px-2 py-1 rounded-full">2024年11月</span>
              </div>
              <div class="mb-4">
                <div class="flex items-baseline mb-1">
                  <p class="text-3xl font-bold mr-3">4人</p>
                  <p class="text-warning text-xl font-semibold">6.5%</p>
                </div>
                <div class="text-sm text-info">本月新增 / 转化率</div>
              </div>
              <div class="space-y-3">
                <div class="bg-blue-50 rounded-lg p-3">
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm text-info">华南团队</span>
                    <span class="text-warning font-semibold">0.0%</span>
                  </div>
                  <div class="text-xl font-bold text-primary">0人</div>
                </div>
                <div class="bg-green-50 rounded-lg p-3">
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm text-info">华东团队</span>
                    <span class="text-warning font-semibold">13.3%</span>
                  </div>
                  <div class="text-xl font-bold text-secondary">4人</div>
                </div>
              </div>
            </div>

            <!-- 会员增长趋势图 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="mb-4">
                <h3 class="text-base font-medium mb-3">会员增长趋势</h3>
                <div class="flex gap-2">
                  <button class="member-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors active" data-team="all">全部团队</button>
                  <button class="member-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="south">华南团队</button>
                  <button class="member-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="east">华东团队</button>
                </div>
              </div>
              <div id="member-chart" style="width: 100%; height: 300px;"></div>
            </div>
          </section>

          <!-- 渠道与推广视角模块 -->
          <section class="mb-6">
            <h2 class="text-lg font-semibold mb-4">渠道与推广视角</h2>
            
            <!-- 渠道总流量趋势图 -->
            <div class="bg-card-bg rounded-xl p-5 card-shadow mb-4">
              <div class="mb-4">
                <h3 class="text-base font-medium mb-3">渠道总流量趋势</h3>
                <div class="flex gap-2">
                  <button class="channel-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors active" data-team="all">全部团队</button>
                  <button class="channel-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="south">华南团队</button>
                  <button class="channel-team-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-colors" data-team="east">华东团队</button>
                </div>
              </div>
              <div id="channel-chart" style="width: 100%; height: 300px;"></div>
            </div>
          </section>

          <!-- 底部间距 -->
          <div class="h-8"></div>
        </div>

        <!-- ActionSheet 组件 - 团队筛选 (活动列表) -->
    <div id="activity-team-sheet-overlay" class="action-sheet-overlay">
      <div id="activity-team-sheet" class="action-sheet">
        <div class="action-sheet-header">
          <span class="action-sheet-title">选择团队</span>
          <button class="action-sheet-close" onclick="closeActionSheet('activity-team-sheet')">&times;</button>
        </div>
        <div class="action-sheet-body">
          <div class="action-sheet-item active" data-value="all" onclick="selectActivityTeam('all', '全部团队')">全部团队</div>
          <div class="action-sheet-item" data-value="south" onclick="selectActivityTeam('south', '华南团队')">华南团队</div>
          <div class="action-sheet-item" data-value="east" onclick="selectActivityTeam('east', '华东团队')">华东团队</div>
        </div>
      </div>
    </div>

    <!-- ActionSheet 组件 - 课程筛选 -->
    <div id="activity-course-sheet-overlay" class="action-sheet-overlay">
      <div id="activity-course-sheet" class="action-sheet">
        <div class="action-sheet-header">
          <span class="action-sheet-title">选择课程</span>
          <button class="action-sheet-close" onclick="closeActionSheet('activity-course-sheet')">&times;</button>
        </div>
        <div class="action-sheet-body">
          <div class="action-sheet-item active" data-value="all" onclick="selectActivityCourse('all', '全部课程')">全部课程</div>
          <div class="action-sheet-item" data-value="course1" onclick="selectActivityCourse('course1', 'Python基础入门')">Python基础入门</div>
          <div class="action-sheet-item" data-value="course2" onclick="selectActivityCourse('course2', '数据分析实战')">数据分析实战</div>
          <div class="action-sheet-item" data-value="course3" onclick="selectActivityCourse('course3', 'Web开发全栈')">Web开发全栈</div>
          <div class="action-sheet-item" data-value="course4" onclick="selectActivityCourse('course4', '产品运营课程')">产品运营课程</div>
        </div>
      </div>
    </div>

    <!-- ActionSheet 组件 - 时间筛选 -->
    <div id="activity-time-sheet-overlay" class="action-sheet-overlay">
      <div id="activity-time-sheet" class="action-sheet">
        <div class="action-sheet-header">
          <span class="action-sheet-title">选择时间范围</span>
          <button class="action-sheet-close" onclick="closeActionSheet('activity-time-sheet')">&times;</button>
        </div>
        <div class="action-sheet-body">
          <div class="action-sheet-item active" data-value="thisMonth" onclick="selectActivityTime('thisMonth', '本月')">本月</div>
          <div class="action-sheet-item" data-value="lastMonth" onclick="selectActivityTime('lastMonth', '上月')">上月</div>
          <div class="action-sheet-item" data-value="last3Months" onclick="selectActivityTime('last3Months', '近3个月')">近3个月</div>
          <div class="action-sheet-item" data-value="last6Months" onclick="selectActivityTime('last6Months', '近6个月')">近6个月</div>
        </div>
      </div>
    </div>

      </div>
    </div>

    <script>
      // ==================== 模拟数据 ====================
      const mockData = {
        finance: {
          all: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [980, 1050, 1120, 1180, 1285, 585],
            target: [1200, 1200, 1200, 1200, 1200, 1500],
            completion: [81.7, 87.5, 93.3, 98.3, 107.1, 39.0],
            growth: [0, 7.1, 6.7, 5.4, 8.9, -54.5]
          },
          south: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [588, 630, 672, 708, 771, 351],
            target: [720, 720, 720, 720, 720, 900],
            completion: [81.7, 87.5, 93.3, 98.3, 107.1, 39.0],
            growth: [0, 7.1, 6.7, 5.4, 8.9, -54.5]
          },
          east: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [392, 420, 448, 472, 514, 234],
            target: [480, 480, 480, 480, 480, 600],
            completion: [81.7, 87.5, 93.3, 98.3, 107.1, 39.0],
            growth: [0, 7.1, 6.7, 5.4, 8.9, -54.5]
          }
        },
        activities: [
          { id: 1, name: 'Python基础入门', team: 'south', teamName: '华南', daysLeft: 5, status: '进行中', progress: '3/8', memberRate: '37.5%' },
          { id: 2, name: '数据分析实战', team: 'east', teamName: '华东', daysLeft: 12, status: '进行中', progress: '5/10', memberRate: '50.0%' },
          { id: 3, name: 'Web开发全栈', team: 'south', teamName: '华南', daysLeft: 3, status: '进行中', progress: '7/8', memberRate: '87.5%' },
          { id: 4, name: '产品运营课程', team: 'east', teamName: '华东', daysLeft: 0, status: '已结束', progress: '10/10', memberRate: '100%' },
          { id: 5, name: 'UI设计入门', team: 'south', teamName: '华南', daysLeft: 8, status: '进行中', progress: '4/12', memberRate: '33.3%' },
        ],
        activityChart: {
          all: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            activities: [8, 10, 12, 11, 15, 5],
            completed: [6, 8, 10, 9, 12, 3]
          },
          south: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            activities: [5, 6, 7, 7, 9, 3],
            completed: [4, 5, 6, 6, 7, 2]
          },
          east: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            activities: [3, 4, 5, 4, 6, 2],
            completed: [2, 3, 4, 3, 5, 1]
          }
        },
        members: {
          all: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [95, 98, 102, 106, 114, 4],
            converted: [8, 10, 12, 10, 12, 4],
            completion: [118.8, 122.5, 127.5, 132.5, 142.5, 5.0],
            growth: [0, 3.2, 4.1, 3.9, 7.5, -96.5]
          },
          south: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [75, 78, 80, 82, 85, 0],
            converted: [6, 8, 9, 8, 9, 0],
            completion: [81.5, 84.8, 87.0, 89.1, 92.4, 0],
            growth: [0, 4.0, 2.6, 2.5, 3.7, -100]
          },
          east: {
            months: ['6月', '7月', '8月', '9月', '10月', '11月'],
            actual: [20, 20, 22, 24, 29, 4],
            converted: [2, 2, 3, 2, 3, 4],
            completion: [76.9, 76.9, 84.6, 92.3, 111.5, 15.4],
            growth: [0, 0, 10.0, 9.1, 20.8, -86.2]
          }
        },
        channels: {
          months: ['6月', '7月', '8月', '9月', '10月', '11月'],
          pv: [12500, 15300, 18200, 16700, 20500, 8500],
          uv: [8300, 9500, 11200, 10800, 13500, 5200],
          ip: [5200, 7800, 9500, 12300, 15800, 3800]
        }
      };

      let currentFilters = {
        financeTeam: 'all',
        activityTeam: 'all',
        activityCourse: 'all',
        activityTime: 'thisMonth',
        activityChartTeam: 'all',
        memberTeam: 'all'
      };

      // ==================== ActionSheet 通用函数 ====================
      function positionActionSheet(overlay, sheet) {
        const phoneScreen = document.querySelector('.phone-screen');
        const rect = phoneScreen.getBoundingClientRect();
        
        // 设置遮罩层和弹出层的位置，使其限制在手机屏幕内
        overlay.style.top = rect.top + 'px';
        overlay.style.left = rect.left + 'px';
        overlay.style.width = rect.width + 'px';
        overlay.style.height = rect.height + 'px';
        
        sheet.style.left = rect.left + 'px';
        sheet.style.width = rect.width + 'px';
        sheet.style.bottom = (window.innerHeight - rect.bottom) + 'px';
      }

      function openActionSheet(sheetId) {
        const overlay = document.getElementById(sheetId + '-overlay');
        const sheet = document.getElementById(sheetId);
        
        // 定位 ActionSheet 在手机屏幕内
        positionActionSheet(overlay, sheet);
        
        overlay.classList.add('show');
        setTimeout(() => sheet.classList.add('show'), 10);
      }

      function closeActionSheet(sheetId) {
        const overlay = document.getElementById(sheetId + '-overlay');
        const sheet = document.getElementById(sheetId);
        sheet.classList.remove('show');
        setTimeout(() => overlay.classList.remove('show'), 300);
      }

      // 点击遮罩关闭
      document.querySelectorAll('.action-sheet-overlay').forEach(overlay => {
        overlay.addEventListener('click', function(e) {
          if (e.target === this) {
            this.classList.remove('show');
            this.querySelector('.action-sheet').classList.remove('show');
          }
        });
      });

      // 窗口大小变化时重新定位已打开的 ActionSheet
      window.addEventListener('resize', function() {
        document.querySelectorAll('.action-sheet-overlay.show').forEach(overlay => {
          const sheet = overlay.querySelector('.action-sheet');
          positionActionSheet(overlay, sheet);
        });
      });

      // ==================== 财务模块 ====================
      function selectFinanceTeam(team) {
        currentFilters.financeTeam = team;
        
        // 更新按钮active状态
        document.querySelectorAll('.finance-team-btn').forEach(btn => {
          btn.classList.remove('active');
          if (btn.dataset.team === team) {
            btn.classList.add('active');
          }
        });
        
        updateFinanceChart();
      }

      function initFinanceChart() {
        const chartDom = document.getElementById('finance-chart');
        const myChart = echarts.init(chartDom);
        window.financeChart = myChart;
        updateFinanceChart();
      }

      function updateFinanceChart() {
        const data = mockData.finance[currentFilters.financeTeam];
        const option = {
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['实际营收', '目标营收', '完成率', '增长率'],
            top: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 11
            }
          },
          xAxis: {
            type: 'category',
            data: data.months,
            axisLine: {
              lineStyle: {
                color: '#E5E6EB'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '营收(万)',
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#F2F3F5'
                }
              },
              axisLabel: {
                fontSize: 11,
                color: '#8C8C8C'
              }
            },
            {
              type: 'value',
              name: '百分比(%)',
              position: 'right',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 11,
                color: '#8C8C8C'
              }
            }
          ],
          series: [
            {
              name: '实际营收',
              type: 'bar',
              data: data.actual,
              itemStyle: {
                color: '#165DFF'
              }
            },
            {
              name: '目标营收',
              type: 'bar',
              data: data.target,
              itemStyle: {
                color: '#E8F3FF'
              }
            },
            {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              data: data.completion,
              lineStyle: {
                color: '#52C41A',
                width: 2
              },
              itemStyle: {
                color: '#52C41A'
              },
              symbol: 'circle',
              symbolSize: 6
            },
            {
              name: '增长率',
              type: 'line',
              yAxisIndex: 1,
              data: data.growth,
              lineStyle: {
                color: '#FAAD14',
                width: 2
              },
              itemStyle: {
                color: '#FAAD14'
              },
              symbol: 'circle',
              symbolSize: 6
            }
          ]
        };
        window.financeChart.setOption(option);
      }

      // ==================== 运营模块 ====================
      function selectActivityTeam(team, teamName) {
        currentFilters.activityTeam = team;
        document.getElementById('activity-team-text').textContent = teamName;
        
        document.querySelectorAll('#activity-team-sheet .action-sheet-item').forEach(item => {
          item.classList.remove('active');
          if (item.dataset.value === team) {
            item.classList.add('active');
          }
        });
        
        closeActionSheet('activity-team-sheet');
        updateActivityList();
      }

      function selectActivityCourse(course, courseName) {
        currentFilters.activityCourse = course;
        document.getElementById('activity-course-text').textContent = courseName;
        
        document.querySelectorAll('#activity-course-sheet .action-sheet-item').forEach(item => {
          item.classList.remove('active');
          if (item.dataset.value === course) {
            item.classList.add('active');
          }
        });
        
        closeActionSheet('activity-course-sheet');
        updateActivityList();
      }

      function selectActivityTime(time, timeName) {
        currentFilters.activityTime = time;
        document.getElementById('activity-time-text').textContent = timeName;
        
        document.querySelectorAll('#activity-time-sheet .action-sheet-item').forEach(item => {
          item.classList.remove('active');
          if (item.dataset.value === time) {
            item.classList.add('active');
          }
        });
        
        closeActionSheet('activity-time-sheet');
        updateActivityList();
      }

      function updateActivityList() {
        let activities = mockData.activities;
        
        // 筛选团队
        if (currentFilters.activityTeam !== 'all') {
          activities = activities.filter(a => a.team === currentFilters.activityTeam);
        }
        
        // 筛选课程
        if (currentFilters.activityCourse !== 'all') {
          activities = activities.filter(a => 
            a.name === document.getElementById('activity-course-text').textContent
          );
        }
        
        const listHtml = activities.map(activity => {
          const teamColor = activity.team === 'south' ? 'bg-blue-100 text-primary' : 'bg-green-100 text-secondary';
          const statusColor = activity.status === '进行中' ? 'text-success' : 'text-info';
          
          return `
            <div class="border border-gray-200 rounded-lg p-3">
              <div class="flex justify-between items-start mb-2">
                <div class="font-medium text-sm">${activity.name}</div>
                <span class="text-xs px-2 py-1 rounded ${teamColor}">${activity.teamName}</span>
              </div>
              <div class="grid grid-cols-2 gap-2 text-xs text-info mb-2">
                <div>剩余: <span class="font-medium text-dark">${activity.daysLeft}天</span></div>
                <div>状态: <span class="font-medium ${statusColor}">${activity.status}</span></div>
                <div>进度: <span class="font-medium text-dark">${activity.progress}</span></div>
                <div>会员: <span class="font-medium text-dark">${activity.memberRate}</span></div>
              </div>
              <button class="w-full py-1.5 bg-light text-primary text-xs rounded-lg">查看详情</button>
            </div>
          `;
        }).join('');
        
        document.getElementById('activity-list').innerHTML = listHtml || '<div class="text-center text-info py-4">暂无数据</div>';
      }

      function selectActivityChartTeam(team) {
        currentFilters.activityChartTeam = team;
        
        // 更新按钮active状态
        document.querySelectorAll('.activity-chart-team-btn').forEach(btn => {
          btn.classList.remove('active');
          if (btn.dataset.team === team) {
            btn.classList.add('active');
          }
        });
        
        updateActivityChart();
      }

      function initActivityChart() {
        const chartDom = document.getElementById('activity-chart');
        const myChart = echarts.init(chartDom);
        window.activityChart = myChart;
        updateActivityChart();
      }

      function updateActivityChart() {
        const data = mockData.activityChart[currentFilters.activityChartTeam];
        const option = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '12%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['活动数量', '成团数量'],
            top: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 12
            }
          },
          xAxis: {
            type: 'category',
            data: data.months,
            axisLine: {
              lineStyle: {
                color: '#E5E6EB'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#F2F3F5'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          series: [
            {
              name: '活动数量',
              type: 'bar',
              data: data.activities,
              itemStyle: {
                color: '#165DFF'
              }
            },
            {
              name: '成团数量',
              type: 'bar',
              data: data.completed,
              itemStyle: {
                color: '#36CFC9'
              }
            }
          ]
        };
        window.activityChart.setOption(option);
      }

      // ==================== 会员模块 ====================
      function selectMemberTeam(team) {
        currentFilters.memberTeam = team;
        
        // 更新按钮active状态
        document.querySelectorAll('.member-team-btn').forEach(btn => {
          btn.classList.remove('active');
          if (btn.dataset.team === team) {
            btn.classList.add('active');
          }
        });
        
        updateMemberChart();
      }

      function initMemberChart() {
        const chartDom = document.getElementById('member-chart');
        const myChart = echarts.init(chartDom);
        window.memberChart = myChart;
        updateMemberChart();
      }

      function updateMemberChart() {
        const data = mockData.members[currentFilters.memberTeam];
        const option = {
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['实际会员数', '转化会员数', '完成率', '增长率'],
            top: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 11
            }
          },
          xAxis: {
            type: 'category',
            data: data.months,
            axisLine: {
              lineStyle: {
                color: '#E5E6EB'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '会员数',
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#F2F3F5'
                }
              },
              axisLabel: {
                fontSize: 11,
                color: '#8C8C8C'
              }
            },
            {
              type: 'value',
              name: '百分比(%)',
              position: 'right',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 11,
                color: '#8C8C8C'
              }
            }
          ],
          series: [
            {
              name: '实际会员数',
              type: 'bar',
              data: data.actual,
              itemStyle: {
                color: '#165DFF'
              }
            },
            {
              name: '转化会员数',
              type: 'bar',
              data: data.converted,
              itemStyle: {
                color: '#36CFC9'
              }
            },
            {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              data: data.completion,
              lineStyle: {
                color: '#52C41A',
                width: 2
              },
              itemStyle: {
                color: '#52C41A'
              },
              symbol: 'circle',
              symbolSize: 6
            },
            {
              name: '增长率',
              type: 'line',
              yAxisIndex: 1,
              data: data.growth,
              lineStyle: {
                color: '#FAAD14',
                width: 2
              },
              itemStyle: {
                color: '#FAAD14'
              },
              symbol: 'circle',
              symbolSize: 6
            }
          ]
        };
        window.memberChart.setOption(option);
      }

      // ==================== 渠道模块 ====================
      function initChannelChart() {
        const chartDom = document.getElementById('channel-chart');
        const myChart = echarts.init(chartDom);
        const data = mockData.channels;
        
        const option = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '12%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['PV', 'UV', 'IP'],
            top: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 12
            }
          },
          xAxis: {
            type: 'category',
            data: data.months,
            axisLine: {
              lineStyle: {
                color: '#E5E6EB'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#F2F3F5'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#8C8C8C'
            }
          },
          series: [
            {
              name: 'PV',
              type: 'line',
              data: data.pv,
              smooth: true,
              lineStyle: {
                color: '#165DFF',
                width: 2
              },
              itemStyle: {
                color: '#165DFF'
              },
              symbol: 'circle',
              symbolSize: 6
            },
            {
              name: 'UV',
              type: 'line',
              data: data.uv,
              smooth: true,
              lineStyle: {
                color: '#36CFC9',
                width: 2
              },
              itemStyle: {
                color: '#36CFC9'
              },
              symbol: 'circle',
              symbolSize: 6
            },
            {
              name: 'IP',
              type: 'line',
              data: data.ip,
              smooth: true,
              lineStyle: {
                color: '#FAAD14',
                width: 2
              },
              itemStyle: {
                color: '#FAAD14'
              },
              symbol: 'circle',
              symbolSize: 6
            }
          ]
        };
        
        myChart.setOption(option);
        window.channelChart = myChart;
      }

      // ==================== 初始化 ====================
      document.addEventListener('DOMContentLoaded', function() {
        // 绑定团队筛选按钮事件 - 财务
        document.querySelectorAll('.finance-team-btn').forEach(btn => {
          btn.addEventListener('click', () => selectFinanceTeam(btn.dataset.team));
        });
        
        // 绑定团队筛选按钮事件 - 活动趋势图
        document.querySelectorAll('.activity-chart-team-btn').forEach(btn => {
          btn.addEventListener('click', () => selectActivityChartTeam(btn.dataset.team));
        });
        
        // 绑定团队筛选按钮事件 - 会员
        document.querySelectorAll('.member-team-btn').forEach(btn => {
          btn.addEventListener('click', () => selectMemberTeam(btn.dataset.team));
        });
        
        // 绑定活动列表筛选按钮事件(保留 ActionSheet)
        document.getElementById('activity-team-filter-btn').addEventListener('click', () => openActionSheet('activity-team-sheet'));
        document.getElementById('activity-course-filter-btn').addEventListener('click', () => openActionSheet('activity-course-sheet'));
        document.getElementById('activity-time-filter-btn').addEventListener('click', () => openActionSheet('activity-time-sheet'));
        
        // 初始化所有图表
        initFinanceChart();
        initActivityChart();
        initMemberChart();
        initChannelChart();
        
        // 初始化活动列表
        updateActivityList();
        
        // 窗口大小变化时调整图表
        window.addEventListener('resize', function() {
          if (window.financeChart) window.financeChart.resize();
          if (window.activityChart) window.activityChart.resize();
          if (window.memberChart) window.memberChart.resize();
          if (window.channelChart) window.channelChart.resize();
        });
      });
    </script>
  </body>
</html>

